<template>
  <div class="wrapper">
    <Main>
      <div class="main-header">
<!--        <div class="wrap-box">-->
<!--          <Input style="width: 100px" search placeholder="Enter something..." />-->
<!--          <Button class="ml-2">搜索</Button>-->
<!--        </div>-->
      </div>
      <div class="main-table">
        <div class="tab-nav tab-border">
          <div class="l-box">
            <b>导航栏列表</b>
          </div>
          <div class="r-box">
            <Button type="primary" @click="createOrEdit(0)">新增导航</Button>
          </div>
        </div>
        <div class="tab-wrapper">
          <Table border :columns="columns1" :data="data1"></Table>
        </div>
<!--        <div class="tab-page tab-border">-->
<!--          <Page :total="100" />-->
<!--        </div>-->
      </div>
      <Modal
        v-model="visible"
        :title="title">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="导航名称" prop="name">
            <Input v-model="formValidate.name" placeholder="输入导航名称"></Input>
          </FormItem>
          <FormItem label="导航名称" prop="icon">
            <Input v-model="formValidate.icon" placeholder="输入Font图标名称"></Input>
          </FormItem>
          <FormItem label="导航链接" prop="link">
            <Input v-model="formValidate.link" placeholder="输入导航链接"></Input>
          </FormItem>
          <FormItem label="优先级" prop="priority">
            <InputNumber v-model="formValidate.priority" placeholder="输入导航优先级"> :max="999" :min="1"></InputNumber>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="cancelClick">取消</Button>
          <Button type="primary" @click="saveClick">保存</Button>
        </div>
      </Modal>
    </Main>
  </div>
</template>

<style scoped lang="sass">
  @import "../styles/main.sass"
</style>

<script>
import { Input, Button, Table, Modal, Form, FormItem, InputNumber } from 'view-design'
// @ is an alias to /src
import Main from '@/components/Main.vue'
import utils from '../utils'
import ns from '../service/navigation'

export default {
  components: { Main, Input, Button, Table, Modal, Form, FormItem, InputNumber },
  data () {
    return {
      title: '新增导航',
      visible: false,
      formValidate: {
        id: undefined,
        name: '',
        icon: '',
        link: '',
        priority: 0
      },
      ruleValidate: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        link: [
          { required: true, message: '链接不能为空', trigger: 'blur' }
        ]
      },
      columns1: [
        { type: 'index', width: 60, align: 'center' },
        { title: '名称', key: 'name' },
        { title: '图标', key: 'icon' },
        { title: '链接', key: 'link' },
        { title: '优先级', key: 'priority', width: 80 },
        {
          title: '创建时间',
          key: 'createdAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.createdAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        },
        {
          title: '更新时间',
          key: 'updatedAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.updatedAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(Button, {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.createOrEdit(params.row)
                  }
                }
              }, '编辑'),
              h(Button, {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data1: [
      ]
    }
  },
  methods: {
    createOrEdit (row) {
      if (!row) {
        this.title = '新增导航'
        this.formValidate = {
          id: undefined,
          name: '',
          icon: '',
          link: '',
          priority: 0
        }
      } else {
        this.title = '编辑导航'
        this.formValidate = {
          id: row.id,
          name: row.name,
          icon: '',
          link: row.link,
          priority: row.priority
        }
      }
      this.visible = true
    },
    remove (row) {
      // 删除确认
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>删除后你可重新添加</p>',
        onOk: () => {
          ns.remove(row.id).then(() => {
            this.$Message.success('操作成功')
            this.request()
          }).catch((resp) => {
            this.$Message.error(resp.message)
          })
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      })
    },
    saveClick () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          const { id, name, icon, link, priority } = this.formValidate
          if (id) {
            ns.update(id, name, icon, link, priority).then((resp) => {
              this.successCallback(resp, '更新成功')
            }).catch(this.failCallback)
          } else {
            ns.create(name, icon, link, priority).then((resp) => {
              this.successCallback(resp, '创建成功')
            }).catch(this.failCallback)
          }
        }
      })
    },
    successCallback (resp, message) {
      this.$Message.success(message)
      this.cancelClick()
      this.request()
    },
    failCallback (resp) {
      this.$Message.error(resp.message)
    },
    cancelClick () {
      this.$refs.formValidate.resetFields()
      this.visible = false
    },
    request () {
      ns.getAll().then((resp) => {
        this.data1 = resp.data
      }).catch((resp) => {
        this.$Message.error(resp.message)
      })
    }
  },
  created () {
    this.$store.dispatch('active', 'home')
    this.request()
  }
}
</script>
